<template>
	<view class="container">
		<view class="bill_top">
			<view :class=" key =='All'? select : selectfles" @click="getinfo('All')">
				全部
			</view>
			<view :class=" key =='add'? select : selectfles" @click="getinfo('add')">
				收入
			</view>
			<view :class=" key =='cut'? select : selectfles" @click="getinfo('cut')">
				支出
			</view>
		</view>
		<view style="width: 100%;height: 60px;">

		</view>
		<view class="bill_li" v-for="item in list" :key="item.id">
			<view class="">
				<text style="font-size: 16px;">{{ item.desc }}</text></br>
				<text style="font-size: 12px;color: #C0C4CC;">{{ item.created_at }}</text>
			</view>
			<view style="  display: flex; justify-content: center; align-items: center;">
				<text v-if="item.change_type === 'cut'">-</text><text v-else>+</text> <text>{{ item.point }}</text>
			</view>
		</view>

		<view class="load">
			<text class="loading-text">
				{{loadingType === 0 ? contentText.contentdown : (loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore)}}
			</text>
		</view>

		<!-- <view class="backtop" @click="backtop">
			<uni-icons type="icon-huidingbu" color="#f2f2f2" size="27"></uni-icons>
			<text>顶部</text>
		</view> -->
	</view>
</template>

<script>
	import uniIcons from '../../ed-icons/ed-icons.vue'
	import { getOne } from '../../api/publicapi.js'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'

	var _self, page = 1;
	export default {
		components: {
			uniIcons,
			uniLoadMore
		},
		data() {
			return {
				select: ' bill_select',
				selectfles: 'top_item ',
				list: [],
				key: 'All',
				loadingType: 0,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "暂时没有更多数据了..."
				}
			}
		},
		// created() {
		// 	window.addEventListener('scroll', this.onPageScroll)
		// },
		// onShow() {
		// 	this.getinfo('All')
		// },
		async onLoad(options) {
			_self = this;
			page = 1
			this.getinfo('All')
		},
		methods: {
			// backtop() {
			// 	uni.pageScrollTo({
			// 		scrollTop: 0,
			// 		duration: 300
			// 	});
			// },
			// 上拉加载
			onReachBottom: function() {
				if (_self.loadingType != 0) { //loadingType!=0;直接返回
					return false;
				}
				this.getinfo(this.key)
			},
			getinfo(key) {
				_self.loadingType = 1;
				uni.showNavigationBarLoading(); //显示加载动画
				if (key !== this.key) {
					page = 1
					this.list = []
				}
           
				let data = {
					key: key,
					page: page
				}
                
				getOne('front/user/getmoneys', data).then(res => {
                  
                    this.key = key
					if (res.data.length <= 0) { //没有数据
					
						_self.loadingType = 2;
						uni.hideNavigationBarLoading(); //关闭加载动画
						return false;
						
					} else {
						
						for (var i = 0; i < res.data.length; i++) {
							_self.list.push(res.data[i]); //将数据拼接在一起
						}
						
						page++;
						_self.loadingType = 0; //将loadingType归0重置
					}
					
                    
					uni.hideNavigationBarLoading(); //关闭加载动画
					
					
                  
				})
			},
			// onPageScroll() {
			// 	// 可滚动容器的高度
			// 	let innerHeight = document.querySelector('.container').clientHeight
			// 	// 屏幕尺寸高度7
			// 	let outerHeight = document.documentElement.clientHeight
			// 	// 可滚动容器超出当前窗口显示范围的高度
			// 	let scrollTop = document.documentElement.scrollTop
			// 	// scrollTop在页面为滚动时为0，开始滚动后，慢慢增加，滚动到页面底部时，出现innerHeight < (outerHeight + scrollTop)的情况，严格来讲，是接近底部。
			// 	// console.log(innerHeight + ' ' + outerHeight + ' ' + scrollTop)
			// 	if (innerHeight <= outerHeight + scrollTop && this.show === true) {
			// 		// 加载更多操作
			// 		// console.log(this.show)
			// 		// 加载数量
			// 		this.page += 1
			// 		this.getinfo(this.key)
			// 	}
			// }
			
			navTo(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>
<style lang="scss">
	.bill_top {
		position: fixed;
		top: 0px;
		width: 100%;
		display: flex;
		padding: 10px;
		justify-content: space-between;
		border-bottom: 1px solid #F8F6FC;
		background: #fff;

		.top_item {
			color: #303133;
			border-bottom: 1px solid #fff;
			padding-right: 10px;
			padding-left: 10px;
			margin-left: 10px;
			margin-right: 10px;
			padding-bottom: 10px;
		}
	}

	.bill_select {
		color: #fa436a;
		border-bottom: 1px solid #fa436a;
		padding-right: 10px;
		padding-left: 10px;
		margin-left: 10px;
		margin-right: 10px;
		padding-bottom: 10px;

	}

	.bill_li {
		margin-left: 20px;
		margin-right: 20px;
		padding-bottom: 5px;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #C0C4CC;
	}

	.load {
		text-align: center;
		font-size: 30upx;
		height: 70upx;
		color: #595959;
	}

	.backtop {
		width: 100upx;
		height: 100upx;
		position: fixed;
		bottom: 81upx;
		right: 20upx;
		border-radius: 50%;
		background: #333;
		text-align: center;
		opacity: .7;
		text-align: center;

		.uni-icons {
			display: block;
		}

		text {
			font-size: 30rpx;
			display: block;
		}
	}
</style>
